import "./detailstype.css"
import React from 'react';
import { InfiniteScroll, List } from 'antd-mobile'
import { Link, useNavigate, useParams } from "react-router-dom"
import { getDetailsType } from '../../api/home'

function Detailstype() {
    let params = useParams(); //获取链接数据
    let navigate = useNavigate();//链接跳转
    let [typelist, setTypelist] = React.useState(null)

    // 加载
    let [Num, editNum] = React.useState(10)
    let [flag, Editflag] = React.useState(false)
    let [page, setPage] = React.useState(null)

    React.useEffect(() => {
        getDetailsType(params.id,Num).then(data => {
            setTypelist(data.data)
            // console.log(data.data);
            setPage(data.data.total)
        })
    }, [])


    return typelist ? (
        <div className="detailstype">
            {/* 顶部 */}
            <div className="header">

                <div className="header-wrap">
                    <i onClick={() => navigate(-1)} className="iconfont icon-zuobian"></i>
                    <div className="title">
                        {typelist.page_title}({typelist.total})
                    </div>
                    <i className="iconfont icon-sort"></i>

                </div>

            </div>

            {/* 内容 */}
            <div className="dishesList-wrap">
                <ul>
                    {
                        typelist.data.map(item => {
                            return (
                                <li key={item.dishes_id}>
                                    <Link to={"/detailsvideo/" + item.dishes_id}>
                                        <div className="content">
                                            <div className="img">
                                                <img src={item.image} />
                                            </div>
                                            <div className="bar">
                                                <p className="title">{item.title}</p>
                                                <div className="sub-title">
                                                    <span>{item.description}</span>
                                                    <span>{item.play}人做过</span>
                                                </div>

                                            </div>
                                            <i className="icon"></i>
                                            <div className="bg"></div>
                                        </div>

                                        <div className="label-bar">
                                            <i className="iconfont icon-w_biaoqian-"></i>
                                            <ul>
                                                {
                                                    item.tags_info.map(data => {
                                                        return (
                                                            <li key={data.id}>{data.text
                                                            }</li>
                                                        )
                                                    })
                                                }

                                            </ul>
                                        </div>
                                    </Link>
                                </li>
                            )
                        })
                    }

                </ul>
                <InfiniteScroll loadMore={async () => {
                        setTimeout(() => {
                            Editflag(true)

                        }, 2000)
                        // console.log(flag);
                        Num += 3
                        editNum(Num)
                        // console.log(Num);
                        await getDetailsType(params.id,Num).then(data => {
                            setTypelist(data.data)
                        })
                        setTimeout(() => {
                            Editflag(false)

                        }, 2000)


                    }} hasMore={flag == false && Num < page}
                        threshold={50}
                    />
            </div>
        </div>
    ) : null;
}

export default Detailstype;